@charset "utf-8";
#container{
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 10px;
    background-color: #f1f1f1;
}

#container .grid{
    width: 300px;
    min-width: 240px;  /*  必须加上  否则会变形 */
    height: 420px;
    margin: 8px;  /*控制.grid 与父容器之间的距离*/
    background-color: #fff;
    box-shadow: 0 0 6px #000;
    border-radius: 5px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#container .grid:hover{
    margin-top: 20px;
}

/*grid  grid_item 样式修改*/
#container .grid #grid_item{
    position: relative;
    width: 240px;
    margin: 0 auto;
    height: 400px;
    padding: 10px;
    overflow: hidden;
}

/*thumb*/
#container .grid #grid_item .thumb{
    position: relative;
    overflow: hidden;
    width: 240px;
    height: 340px;
}

#container .grid #grid_item .thumb img{
     position: absolute;
     width: 240px;
     height: 340px;
     -webkit-transition: margin-top 0.3s;
     -moz-transition: margin-top 0.3s;
     -ms-transition: margin-top 0.3s;
     -o-transition: margin-top 0.3s;
     transition: margin-top 0.3s;

 }

#container .grid #grid_item .thumb .extra{
     width: 240px;
     height: 340px;
     line-height: 34px;
     text-align: center;
     position: absolute;
     background-color: #000;
     top: -340px;
     opacity: 0.8;
     -webkit-transition: margin-top 0.3s;
     -moz-transition: margin-top 0.3s;
     -ms-transition: margin-top 0.3s;
     -o-transition: margin-top 0.3s;
     transition: margin-top 0.3s;
     padding-left: 0px;
 }
#container .grid #grid_item .thumb .extra img{
	width: 170px;
	height: 170px;
	position: absolute;
	left: 35px;
	bottom: 90px;
}
#container .grid #grid_item .thumb .extra p{
	font-size: 20px;
    color: red;
    position: absolute;
    bottom: 30px;
    left: 35px;
}
#container .grid #grid_item .thumb .extra i{
   color: #fff;
}
#container .grid #grid_item .thumb .extra span{
    color: #fff;
    float: right;
    margin-right: 20px;
}
/*#container .grid #grid_item:hover .extra{
    margin-top: 0px;
}*/



/*meta*/

#container .grid #grid_item .meta{
    width: 240px;
    height: 34px;
    line-height: 34px;
    position: relative;
    color: #666;
    border-bottom: 1px solid #f2f2f2;
}

/*data*/
#container .grid #grid_item .data{
    width: 240px;
    height: 35px;
    line-height: 35px;
}
#container .grid #grid_item .data .time{
    float: left;
}
#container .grid #grid_item .data .time a{
    color: #999;
}

#container .grid #grid_item .data span{
    float: right;
}






